<template>
    <view class="container">
        <div class="border">
            <div class="border-content">
                <div style="height: 10px;"></div>
                <div class="top-line">
                    <div class="line"></div>
                    <div style="width: 10px;"></div>
                    <div style="color: #1A512C;">安全培训</div>
                </div>
                <div style="height: 10px;"></div>
                <!-- 表单 -->
                <div style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">开始时间</div>
                        <div class="borders">
                            <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange"> -->
                            <div style="height: 5rpx;"></div>
                            {{ obj.startTime }}
                            <div style="height: 5rpx;"></div>
                            <!-- </picker> -->

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">结束时间</div>
                        <div class="borders">
                            <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange"> -->
                            <div style="height: 5rpx;"></div>
                            {{ obj.endTime }}
                            <div style="height: 5rpx;"></div>
                            <!-- </picker> -->

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">考试试卷</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.paperName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">合格分数</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.scoreLine }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                </div>
                <!-- 按钮 -->
                <div style="height: 10px;"></div>
                <div class="footer">
                    <div class="button-footer" @click="read">我已知晓</div>
                    <div class="button-footer" @click="exam">立即考试</div>
                </div>
            </div>
        </div>
	</view>
</template>
<script>
import { getKaoshi } from '../api/api.js'
export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            date: currentDate,
            obj:{}
        }
    },
    methods: {
        //我已知晓
        read(){
            uni.navigateBack({
                delta:1
            })
        },
        //立即考试
        exam(){
            uni.redirectTo({
                 url: `/pagesPlant/index/proce`
            });
        },
        // 返回
        cancel(){
            uni.navigateBack({ delta: 1 })
        },
        bindDateChange: function(e) { //选择日期
            this.date = e.detail.value
            console.log('date', this.date)
        },
        getDate(type) { //年月日
            const date = new Date();
            // const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
    },
    computed:{
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    onShow(){
        getKaoshi({}).then(res=>{
            console.log(res.data,'res');
            this.obj = res.data.data[0]
            
        })
    }
}
</script>
<style lang="scss">
.container{
    background: #394E36;
    .border{
        border-radius: 10px;
        background: #E3EDE2;
        height: 100vh;
        overflow-y: scroll;
        .border-content{
            width: 90%;
            margin-left: 5%;
        }
    }
}
.top-line{
    display: flex;
    align-items: center;
}
.line{
    background: #1A512C;
    width: 7rpx;
    height: 35rpx;
}
.form-flex{
    display: flex;
    align-items: center;
    width: 100%;
}
.borders{
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
    width: 70%;
}
.borders-min{
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.button-footer{
    width: 48%;
    height: 50px;
    background: #46A164;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}
</style>